{include file='index/header' /}
<div class="main">
	<div class="contents">
		<div class="top">修改头像</div>
		<h2><a href="/setting/">个人资料 | </a><span><a href="/setting/avatar/">修改头像 | </a><span><a
						href="/setting/background/">背景主题 | </a></span><span><a href="/setting/passwd/">修改密码</a></span>
		</h2>
		<!-- 		<h2>头像</h2> -->
		<div class="entry formsubmit" style="border-bottom: unset">
			<div class="avatarhtml">
				<img src="{$userInfo.head_big}" style="min-height: 200px;" alt="">
			</div>
			{if $avatarArr}
			<div class="recent-backgrounds"
				style="margin-top: 20px; padding: 15px; background: #f8f8f8; border-radius: 5px;">
				<h3 style="margin-bottom: 15px; color: #333;text-align: left;">最近使用的头像</h3>
				<div style="display: flex; gap: 5px; flex-wrap: wrap;">
					{volist name="avatarArr" id="bg" key="k"}
					<div style="width: 70px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden;"
						onclick="$('.avatarhtml img').attr('src', '{$bg[\'media_info\']}'); $('#avatarVal').val('{$bg[\'json\']}');">
						<img src="{$bg['media_info']}"
							style="width: 100%; height: 100%; object-fit: cover; border: 2px solid #eee; transition: all 0.3s;"
							onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
					</div>
					{/volist}
				</div>
			</div>
			{/if}
			<div class="uploadhtml formsubmit">
				<button type="button" id="uploadAvatar">
					<i class="layui-icon">&#xe67c;</i>上传
				</button>
				<button type="button" id="saveUpload">
					保存
				</button>
			</div>
		</div>



	</div>
	<input type="hidden" value="" id="avatarVal">
	<!-- <script src="/static/index/js/setting.js"> -->
	<!-- <script>

		$(function (){
			layui.use('upload', function(){
			  var upload = layui.upload;
			   
			  //执行实例
			  var uploadInst = upload.render({
			    elem: '#uploadAvatar' //绑定元素
			    ,url: '/index/setting/uploadAvatar' //上传接口
			    ,method: 'GET'
			    ,done: function(res){
			      	if (res.status) {
			      		var data = res.data;
			      		$(".avatarhtml img").attr('src', data.big);
			      		$("#avatarVal").val(JSON.stringify(data));
			      	}
			    }
			    ,error: function(){
			      //请求异常回调
			    }
			  });
			});
			$("#saveUpload").click(function(event) {
				var avatarVal = $("#avatarVal").val();
				if (!avatarVal) return false;
				$.ajax({
					url: '/index/setting/saveUpload',
					type: 'GET',
					dataType: 'json',
					data: {avatarVal: avatarVal},
				})
				.done(function(data) {
					if (data.status) {
						alertMsg('上传成功',0,1);
					} else {
						alertMsg(data.msg);
					}
				})
				.fail(function() {
					console.log("error");
				})
				.always(function() {
					console.log("complete");
				});
				
			});
			$("#changeInfo").click(function(event) {
				var jsonData = {};
				jsonData.username = $("input[name='username']").val();
				jsonData.blog = $("input[name='blog']").val();
				jsonData.nickname = $("input[name='nickname']").val();
				jsonData.phone = $("input[name='phone']").val();
				jsonData.email = $("input[name='email']").val();
				jsonData.sex = $("input[name='sex']:checked").val();
				jsonData.province = $("select[name='province'] option:selected").val();
				jsonData.city = $("select[name='city'] option:selected").val();
				jsonData.intro = $("textarea[name='intro']").val();
				var config = {};
				config.action = 'changeInfo';
				changeUserInfo(jsonData, config);
			});
		})
		function changeUserInfo(info, config)
		{
			$.ajax({
				url: '/index/user/'+config.action,
				type: 'GET',
				dataType: 'json',
				data: {info: info},
			})
			.done(function(data) {
				alertMsg(data.msg);
			})
			.always(function() {
				console.log("complete");
			});
			
		}
		function checkInfo2(obj, type)
		{
			var text = $(obj).val();
			if (!text) {
				return false;
			}
			var action = $(obj).attr('id');
			$.ajax({
				url: '/index/user/checkInfo2',
				type: 'GET',
				dataType: 'json',
				data: {text: text, type: type},
			})
			.done(function(data) {
				if (!data.status) {
					if (!data.status) {
						alertMsg(data.msg);
						$(obj).focus();
					}
				}
			})
		}	
	</script> -->
	<script src="/static/index/js/setting.js"></script>
	{include file='index/sidebar_index' /}
	{include file='index/footer' /}